import React from "react";
import './index.css';

class NumberList extends React.Component {
    state = {
        start: 0,
    }


    handleClickOdd = () => {
        this.setState({
            start: 1
        })
    }

    handleClickEven = () => {
        this.setState({
            start: 2
        })
    }

    handleClickNormal = () => {
        this.setState({
            start: 0
        })
    }

    render() {
        const list = [2, 4, 6, 8, 10]
       
        return <>
                <button onClick={this.handleClickOdd}>奇数行加深</button>
                <button onClick={this.handleClickEven}>偶数行加深</button>
                <button onClick={this.handleClickNormal}>正常显示</button>
                <div>
                    {this.state.start === 1 ? 
                    list.map((item, index) => {
                        const isEvent = !!(index % 2);
                        const cls = `line ${isEvent ? '' : 'event'}`
                        return (
                            <p key={item} className={cls}>{item}</p>
                        );
                    })
                    : this.state.start === 2 ?
                    list.map((item, index) => {
                        const isEvent = !!(index % 2);
                        const cls = `line ${isEvent ? 'event' : ''}`
                        return (
                            <p key={item} className={cls}>{item}</p>
                        );
                    })
                    : list.map((item, index) => {
                        const cls = 'line'
                        return (
                            <p key={item} className={cls}>{item}</p>
                        );
                    })
                    }
                </div>
        </>
    }
}

export default NumberList;